<template>
<el-row class ="user" :getter= "20">
    <el-col :span="8" style="margin-top: 20px">
         <el-card shadow="hover">
            <div>
                  <img src='../../assets/image/userimg.jpg' />
                <div class="userinfo">
                    <p class="username">张三</p>
                    <p class="access">超级管理员</p>
                </div>
            </div>
            <div class="logininfo">
                <p class="time">上次登录时间<span>2021-11-5</span></p>
            </div>
         </el-card>
         <el-card style="height:470px; margin-top: 20px">
             <el-table :data="tabledata">
                  <el-table-column  show-overflow-tooltip
                  v-for="(val,key) in tablelabel"
                  :key="key"
                  :prop="key"
                  :label="val">
                  </el-table-column>
             </el-table>
         </el-card>
    </el-col>

    <el-col :span="16">
        <div class="record">
        <el-card shadow="hover"
        v-for="item in recorddata"
        :key="item.name"
        :body-style="{ display: 'flex', padding: 0}">
        <i
        class="icon"
        :class="item.icon"
        :style="{ background: item.color }">
        </i>
        <div class="detail">
            <p class="num">{{item.value}}人</p>
            <p class="text">{{item.name}}</p>
        </div>
        </el-card>
    </div>
    <el-card shadow="hover" style="height:280px" ref="echart"></el-card>
    <div class="graph">
        <el-card shadow="hover" style="height:260"></el-card>
        <el-card shadow="hover" style="height:260px"></el-card>
    </div>
    </el-col>
</el-row>
</template>

<script>
import {getMenu} from '../../../vue-manage/api/data'
export default{
    data(){
        return {
            tabledata:[
                {
                    id:"杨力彬",
                    time:"21-5-14 19:33",
                },
                {
                    id:"薛飞宇",
                    time:"21-8-19 14:11",
                },
                {
                    id:"范彬",
                    time:"12-9-11 9:56",
                }
            ],
            recorddata:[
                {
                    name: "当前在线人数",
                    value: 1314,
                    icon: "el-icon-success",
                    color:"#2ec7c9",
                },
                {
                    name: "日累计在线人数",
                    value: 8888,
                    icon: "el-icon-s-custom",
                    color:"#2ec7c9",
                },
                {
                    name: "月累计在线人数",
                    value: 121314,
                    icon: "el-icon-s-custom",
                    color:"#2ec7c9",
                },
                 {
                    name: "年累计在线人数",
                    value: 121314,
                    icon: "el-icon-s-custom",
                    color:"#2ec7c9",
                },
                {
                    name: "年累计在线人数",
                    value: 121314,
                    icon: "el-icon-s-custom",
                    color:"#2ec7c9",
                },
                {
                    name: "年累计在线人数",
                    value: 121314,
                    icon: "el-icon-s-custom",
                    color:"#2ec7c9",
                },
            ],
            tablelabel:{
                id:'用户id',
                time:'登录时间',
            },
           echartsdata:{
               order: {
                title: {
                    text: '第一个 ECharts 实例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }],
               }
           },

        }
    },
    // 接口请求一般都在Mounted下
    mounted(){
        getMenu().then(res => {
            console.log(res)
        })
    }
};
</script>

<style lang="scss" scoped>
    .user{
       display: flex;
       align-items: center;
       padding-bottom: 20px;
       margin-bottom: 20px;
       border-bottom: 1ps solid #ccc;
       img{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40px;
    }
    &userinfo{
        .username{
            font-size: 32px;
            margin-bottom: 10px;
        }
        .access{
            color: #999999;
        }
    }
   }
   .logininfo{
       p{
         line-height: 28px;
         font-size: 14px;
         color: #999999;
         span{
             color: #666666;
             margin-left: 60px;
         }
       }
   }
      .record{
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       .el-card{
           width: 32%;
           margin-bottom: 20px;
       }
        .icon{
            font-size: 30px;
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            color: #fff;
         }
        .detail{
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .num{
                font-size: 30px;
                margin-bottom: 10px;
             }
            .txt{
                 font-size: 14px;
                text-align: center;
                color: #999999;
            }
        }
    }
   .graph{
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       .el-card{
           width: 48%;
       }
    }
</style>
